<template>
    <div 
    v-if="showController"
    class="guide-mask" 
    @click.stop
    >
        <div class="guide-popconfirm" :style="zoom">
            <div 
            v-for="(item, index) in list"
            :key="index"
            class="step-item" 
            :class="{fixed: item.fixed}"
            v-show="stepController === index"
            :style="calcItemStyle(item)"
            >
                <popconfirm
                ref="popconfirm"
                :title="item.title"
                :confirm-button-text="item.btn"
                cancel-button-text=" "
                hide-icon
                @confirm="nextStep"
                :placement="item.placement"
                >
                    <div 
                        ref="item"
                        class="step-heigh-light" 
                        slot="reference"
                        @click="nextStep"
                    ></div>
                </popconfirm>
            </div>
        </div>
    </div>
</template>

<script>
import dialogWaitList from '@js/dialog-wait-list.js';

import Popconfirm from './components/popconfirm.vue';

export default {
    components: {
        Popconfirm,
    },
    props: {
        // localStorage中存储的键名
        name: {
            type: String,
            default: 'guide-popconfirm',
        },
        list: {
            type: Array,
            default: () => [
                // {
                //     title: '开标待办事宜在这里设置',
                //     placement: 'right',
                //     btn: '下一步',
                //     fixed: false, // 是否使用position: fixed
                //     position: [32, 154],
                //     size: [136, 40],
                // },
            ],
        },
        // 容器布局
        zoom: {
            type: String,
            default: 'width: 1200px; margin: 0 auto;',
        },
    },
    data() {
        return {
            showController: false, // 是否展示
            stepController: -1, // 步骤控制
        };
    },
    computed: {},
    watch: {
        name:{
            handler(n,o){
                this.doMounted();
            },
            deep:true,
        }
    },
    methods: {
        nextStep() {
            this.stepController ++;

            var next = this.$refs.item[this.stepController],
                nextPopconfirm = this.$refs.popconfirm[this.stepController];

            if (next) {
                next.scrollIntoView({
                    behavior: 'smooth',
                });

                setTimeout(() => {
                    nextPopconfirm.visible = true;
                }, 0);

                return;
            }

            // 关闭
            this._finishHandler();
        },
        // 结束并关闭
        _finishHandler() {
            this.showController = false;
            this.closeUrlHandler();

            setLocal({
                [this.name]: true,
            });

            this.$emit('end');

            // 继续执行列队中的其他节点
            dialogWaitList.next();
        },
        // 启用并开始展示
        _startHandler(step = -1) {
            this.stepController = step;
            this.showController = true;

            this.$nextTick(() => {
                this.nextStep();
            });
        },
        // 生成项的位置信息
        calcItemStyle(item) {
            var style = {};

            if (item.position) {
                if (Array.isArray(item.position)) {
                    let [left, top] = item.position;

                    style.left = isNaN(left * 1) ? left : `${left}px`;
                    style.top = isNaN(top * 1) ? top : `${top}px`;
                }

                if (typeof item.position === 'object') {
                    style = {
                        ...style,
                        ...item.position,
                    };
                }
            }

            if (item.size) {
                let [width, height] = item.size;

                style.width = isNaN(width * 1) ? width : `${width}px`;
                style.height = isNaN(height * 1) ? height : `${height}px`;
            }

            return style;
        },
        //处理 url 中携带的参数
        closeUrlHandler() {
            let query =  clone(this.$route.query);
            if(!query.hasOwnProperty('guide')){
                return;
            }
            delete query.guide;

            let url = this.$route.path + toSearch(query);
            this.$router.replace(url);
        },
        // mounted 事件
        doMounted(){
            if(!this.name){
                return;
            }

            //先判断 url 地址，在根据本地判断
            var isGuide = this.getQuery('guide');
            
            if(isGuide == 'true'){
                dialogWaitList.push(() => {
                    this._scrollToTop();

                    this._startHandler();
                }, 2);

                return;
            } 

            var localVal = getLocal(this.name);

            if (localVal) {
                return;
            }

            dialogWaitList.push(() => {
                this._scrollToTop();
                
                this._startHandler();
            }, 2);
        },
        _scrollToTop() {
            try {
                var sCon = document.querySelector('.page-body');

                sCon.scrollTo(0, 0);
            } catch(e) {}
        },
    },
    mounted() {
        this.doMounted();
    },
};
</script>

<style lang="scss" scoped>
    .guide-mask{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgb(14, 1, 1);
        opacity: 0.3;
        z-index: 2000;

        .guide-popconfirm{
            height: 100%;
            position: relative;

            .step-item{
                position: absolute;
                background-color: white;
                border-radius: 4px;
                transition: all .3s;

                &.fixed{
                    position: fixed;
                }

                .step-heigh-light{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
</style>